<template>
    <div>
        <el-dialog v-model="props.visible" title="机台关系列表" width="50%" @close="handleCancel">
            <el-form :model="form" :rules="rules" ref="userRef" :inline="true">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="印刷机台" prop="printMachineName">
                            <el-input
                                v-model="form.printMachineName"
                                readonly
                                placeholder="请选择机台"
                                @click="openDialog"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="所属车间" prop="printWorkshopName">
                            <el-input
                                v-model="form.printWorkshopName"
                                readonly
                                placeholder="自动带出"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="折页机台" prop="foldMachineName">
                            <el-input
                                v-model="form.foldMachineName"
                                readonly
                                placeholder="请选择机台"
                                @click="openDialogFold"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="所属车间" prop="foldWorkshopName">
                            <el-input
                                v-model="form.foldWorkshopName"
                                readonly
                                placeholder="自动带出"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="handleCancel">取 消</el-button>
            </div>
        </el-dialog>
        <searchWorkbranch
            :visible="openWorkBranch"
            @changeUpdate="changeWorkBenchDataPrint"
            type="2"
            @cancel="openWorkBranch = false"
        ></searchWorkbranch>
        <searchWorkbranchFold
            :visible="openWorkBranchFold"
            @changeUpdate="changeWorkBenchDataFold"
            type="4"
            @cancel="openWorkBranchFold = false"
        ></searchWorkbranchFold>
    </div>
</template>

<script setup>
import searchWorkbranch from './searchWorkbranch'
import searchWorkbranchFold from './searchWorkbranch'
import { ElMessage } from 'element-plus'

import { addMachineRelevance } from '@/api/production/machineRelevance.js'

const emit = defineEmits(['changeUpdate', 'cancel', 'success'])
// import { listPaper } from '@/api/basicInfo/paperCoding.js'
const { proxy } = getCurrentInstance()

const props = defineProps({
    visible: {
        type: Boolean,
        default: false,
    },
})
const route = useRoute()
const userRef = ref(null)
const openWorkBranch = ref(false)
const openWorkBranchFold = ref(false)
const data = reactive({
    form: {},
    rules: {
        printMachineName: [{ required: true, message: '印刷机台不能为空', trigger: ['blur'] }],
        foldMachineName: [{ required: true, message: '折页机台不能为空', trigger: ['blur'] }],
    },
})

const { form, rules } = toRefs(data)
watch(
    () => props.visible,
    (val) => {
        if (val) {
            console.log(122)
            proxy.resetForm('userRef')
        }
    }
)

// 打开机台页面
const openDialog = () => {
    console.log(1)
    openWorkBranch.value = true
}
const openDialogFold = () => {
    openWorkBranchFold.value = true
}
// 选中的机台 印刷
const changeWorkBenchDataPrint = (row) => {
    form.value.printMachineName = row.machineName
    form.value.printMachineId = row.pid
    form.value.printWorkshopName = row.workshopName
    openWorkBranch.value = false
}
// 选中的机台 折页
const changeWorkBenchDataFold = (row) => {
    form.value.foldMachineName = row.machineName
    form.value.foldMachineId = row.pid
    form.value.foldWorkshopName = row.workshopName
    openWorkBranchFold.value = false
}

const handleCancel = () => {
    proxy.resetForm('userRef')
    emit('cancel')
}
// 保存
const submitForm = async () => {
    try {
        await userRef.value.validate()
        // if (route.query?.id) {
        //     await addMachineRelevance({
        //         ...form.value,
        //     })
        //     ElMessage({
        //         message: '编辑成功',
        //         type: 'success',
        //     })
        // } else {

        // }
        form.value.isEnable = '1'
        await addMachineRelevance({
            ...form.value,
        })
        ElMessage({
            message: '新增成功',
            type: 'success',
        })
        proxy.resetForm('userRef')
        emit('success')
    } catch {}
}
</script>

<style lang="scss" scoped>
.dialog-footer {
    display: flex;
    align-content: center;
    justify-content: center;
}
</style>
